<template>
  <div class="gplot">
    <div id="gplot" style="width: 900px;height: 500px;"></div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    name: "Gplot",
    mounted() {
      this.getGplot()
    },
    methods: {
      getGplot() {
        let myGplot = echarts.init(document.getElementById('gplot'))
        let options = {
          title: {
            text: '网络拓扑图'
          },
          tooltip: {},
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          series: [
            {
              type: 'graph',
              layout: 'none',
              symbolSize: 50,
              roam: true,
              label: {
                normal: {
                  show: true
                }
              },
              edgeSymbol: [
                'circle',
                'arrow'
              ],
              edgeSymbolSize: [4, 10],
              edgeLabel: {
                normal: {
                  textStyle: {
                    fontSize: 20
                  }
                }
              },
              data: [
                {
                  name: '服务器',
                  x: 100,
                  y: 100,
                  symbol: 'image://http://qiniu.liyunxing.top/fuq.png',
                  symbolSize: [50, 60]
                },
                {
                  name: '无线电话',
                  x: 220,
                  y: 300,
                  symbol: 'image://http://qiniu.liyunxing.top/sj.png',
                  symbolSize: [50, 60]
                },
                {
                  name: '交换机',
                  x: 100,
                  y: 200,
                  symbol: 'image://http://qiniu.liyunxing.top/jhj.png',
                  symbolSize: [50, 60]
                },
                {
                  name: '有线电话',
                  x: 105,
                  y: 300,
                  symbol: 'image://http://qiniu.liyunxing.top/zj.png',
                  symbolSize: [50, 60]
                },
                {
                  name: '电脑',
                  x: 10,
                  y: 300,
                  symbol: 'image://http://qiniu.liyunxing.top/dn.png',
                  symbolSize: [50, 60]
                }
              ],
              links: [
                //交换机↔服务器
                {
                  source: '交换机',
                  target: '服务器'
                }, {
                  source: '服务器',
                  target: '交换机'
                },
                //........................
                //交换机↔电脑
                {
                  source: '交换机',
                  target: '电脑'
                },
                {
                  source: '电脑',
                  target: '交换机'
                },
                //............................
                //交换机↔无线电话
                {
                  source: '交换机',
                  target: '无线电话'
                },
                {
                  source: '无线电话',
                  target: '交换机'
                },
                //............................
                //交换机↔有线电话
                {
                  source: '交换机',
                  target: '有线电话'
                },
                {
                  source: '有线电话',
                  target: '交换机'
                }
              ],
              lineStyle: {
                normal: {
                  opacity: 0.5,
                  width: 1,
                  curveness: 0,
                  color:'#ee9a9a'
                }
              }
            }
          ]
        };
        myGplot.setOption(options)
      }
    }
  }
</script>

<style scoped>

</style>